<template>
	<l-tab v-model="tabActive" :list="tabList">
		<component :is="tabComponent[tabActive]"></component>
	</l-tab>
</template>
<script>
import registered from './components/Registered';
import plus from './components/Plus';

export default {
	name: 'MessageConf',
	components: {
		registered,
		plus,
	},
	data() {
		return {
			tabList: ['欢迎注册', '消息推送'],
			tabComponent: ['registered', 'plus'],
			tabActive: 0,
		};
	},
};
</script>

<style lang="scss" scoped>
.message {
	::v-deep .el-card__body {
		height: 100vh;
	}
	&__left {
		border: 1px solid #4c59c6;
		border-radius: 4px;
		&--item {
			cursor: pointer;
			height: 48px;
			color: #2c333f;
			font-size: 12px;
			text-align: center;
			line-height: 48px;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		}
		&--active {
			background: rgba(76, 89, 198, 0.2);
			color: #4c59c6;
			font-weight: bold;
		}
	}
	&__right {
		border-left: 1px solid #f3f4f7;
	}
}
</style>
